<template>
    <div class="cvu-tab">
        <Tabs 
            :value="currentValue"
            :type="type"
            :size="size"
            :closable="closable"
            :animated="animated"
            :capture-focus="captureFocus"
            :before-remove="beforeRemove"
            :name="name"
            :draggable="draggable"
        >
            <slot></slot>
        </Tabs>
    </div>
</template>
<script>
import common from '../../../until/common'
export default {
    name: 'cvu-tab',
    props: {
        // 当前激活 tab 面板的 name，可以使用 v-model 双向绑定数据
        value: {
            type: [String, Number]
        },
        // 页签的基本样式，可选值为 line 和 card
        type: {
            validator (value) {
                return common.oneOf(value, ['line', 'card']);
            },
            default: 'line'
        },
        // 尺寸，可选值为 default 和 small，仅在 type="line" 时有效
        size: {
            validator (value) {
                return common.oneOf(value, ['small', 'default']);
            },
            default: 'default'
        },
        // 是否可以关闭页签，仅在 type="card" 时有效
        closable: {
            type: Boolean,
            default: false
        },
        // 是否使用 CSS3 动画
        animated: {
            type: Boolean,
            default: false
        },
        // Tabs 内的表单类组件是否自动获得焦点
        captureFocus: {
            type: Boolean,
            default: false
        },
        // 关闭前的函数，返回 Promise 可阻止标签关闭
        beforeRemove: Function,
        // Tabs 嵌套时，用 name 区分层级
        name: String,
        // 开启可配合事件 @on-drag-drop 实现拖拽调整页签顺序，详见示例
        draggable: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            currentValue: this.value
        }
    },
    watch: {
        value (val) {
            this.currentValue = val
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '../../../style/_index.scss';
</style>